<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>游玩</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style type="text/css">
			.books{text-indent: 2em;}
			.talks{font-size: .6rem;}
			.list-block{margin: 0;}
			.comment{margin: .5rem;}
		</style>
  </head>
  <body>
    <div class="page-group">
        <div class="page page-current">
        	<header class="bar bar-nav">
					  <a class="button button-link button-nav pull-left back" >
					  	<span class="icon icon-left"></span>
					    返回
					  </a>
					  <h1 class="title">详情</h1>
					</header>
				
				
				
        	<div class="content">
        		<div class="card demo-card-header-pic">
					    <div valign="bottom" class="card-header color-white no-border no-padding">
					      <img class='card-cover' src="../img/dfa.jpg" alt="">
					    </div>
					    <div class="card-header">《桂林山水》</div>
					    <div class="card-content">
					      <div class="card-content-inner">
					        <p class="color-gray">陈淼&nbsp;&nbsp;&nbsp;发表于 2015/01/15</p>
					        <p class="books">人们都说：”桂林山水甲天下。“我们乘着木船荡漾在漓江上，来观赏桂林的山水。</p>
<p class="books">我看见过波澜壮阔的大海，玩赏过水平如镜的西湖，却从没看见过漓江这样的水。漓江的水真静啊，静得让你感觉不到它在流动；漓江的水真清啊，清得可以看见江底的沙石；漓江的水真绿啊，绿得仿佛那是一块无瑕的翡翠。船桨激起的微波扩散出一道道水纹，才让你感觉到船在前进，岸在后移。</p>
<p class="books">我攀登过峰峦雄伟的泰山，游览过红叶似火的香山，却从没看见过桂林这一带的山。桂林的山真奇啊，一座座拔地而起，各不相连，像老人，像巨象，像骆驼，奇峰罗列，形态万千；桂林的山真秀啊，像翠绿的屏障，像新生的竹笋，色彩明丽，倒映水中；桂林的山真险啊，危峰兀立，怪石嶙峋，好像一不小心就会栽到下来。</p> 
<p class="books">这样的山围绕着这样的水，这样的水倒映着这样的山，再加上空中云雾迷蒙，山间绿树红花，江上竹筏小舟，让你感到像是走进了连绵不断的画卷，真是“舟行碧波上人在画中游。”</p>
					      </div>
					    </div>
					    <div class="card-footer">
					      <a href="#" class="link" id="zan">赞&nbsp;<span id="count"></span></a>
					      <a href="#" class="link">评论</a>
					    </div>
					  </div>
        		
        		<div class="comment">
	        		<div class="list-block media-list">
						    <ul>
						      <li>
						        <div class="item-content">
						          <div class="item-media"><img src="../img/txa.jpg" style='width: 2.2rem;'></div>
						          <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title">官方客服</div>
						            </div>
						            <div class="talks">美景多多，约上小伙伴，来一场说走就走的旅行吧！</div>
						          </div>
						        </div>
						      </li>
						    </ul>
						  </div>
						  
						  <div class="list-block media-list">
						    <ul>
						      <li>
						        <div class="item-content">
						          <div class="item-media"><img src="../img/txa.jpg" style='width: 2.2rem;'></div>
						          <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title">小猪佩奇</div>
						            </div>
						            <div class="talks">@官方客服：官方会让漂亮的小姐姐一起玩么？？？会一起玩么？？？</div>
						          </div>
						        </div>
						      </li>
						    </ul>
						  </div>
						  
						  <div class="list-block media-list">
						    <ul>
						      <li>
						        <div class="item-content">
						          <div class="item-media"><img src="../img/txb.jpg" style='width: 2.2rem;'></div>
						          <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title">去吧，皮卡丘</div>
						            </div>
						            <div class="talks">十一小长假，桂林走起，有要一起的么？？？</div>
						          </div>
						        </div>
						      </li>
						    </ul>
						  </div>
						  
						  <div class="list-block media-list">
						    <ul>
						      <li>
						        <div class="item-content">
						          <div class="item-media"><img src="../img/txc.jpg" style='width: 2.2rem;'></div>
						          <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title">我家的小仙女</div>
						            </div>
						            <div class="talks">@去吧，皮卡丘：桂林去过了，风景确实很漂亮，值得去一趟。</div>
						          </div>
						        </div>
						      </li>
						    </ul>
						  </div>
						  
						  <div class="list-block media-list">
						    <ul>
						      <li>
						        <div class="item-content">
						          <div class="item-media"><img src="../img/txd.jpg" style='width: 2.2rem;'></div>
						          <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title">顽皮小子</div>
						            </div>
						            <div class="talks">家里孩子还小，好想去，可惜……</div>
						          </div>
						        </div>
						      </li>
						    </ul>
						  </div>
						  
					  </div>
					  
					  
        	</div>
        </div>
    </div>

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
		<script type="text/javascript">
			$.init();
			
			var isZan = false;
			$('#zan').click(function(){
				var count = 1;
				if(!isZan){
					$("#count").html(count++);
					$.toast("点赞+1");
					isZan = true;
				}else{
					$("#count").html(count-- > 0 ? count-- : 0);
					$.toast("取消点赞");
					isZan = false;
				}
				
			});
		</script>
  </body>
</html>